<template>
  <div>
    <el-header class="homeHeader">
      <h1>学生成绩管理系统</h1>

      <el-dropdown class="userInfo">
        <!--可以绑定一个下拉框事件 -->
        <span class="el-dropdown-link">
          <p style="display:inline; color:#fff;margin-top: 10px;">
            <span v-if="role == 'admin'">教师</span>
            <span v-else>学生</span>
          </p>
          <i><img src="../assets/user4.png" /></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <el-button type="text" @click="signInfo">个人中心</el-button>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-button type="text" @click="quitLogin">退出登录</el-button>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    <el-container id="main-container">
      <el-aside width="250px" border>
        <el-menu @select="menuClick" :default-active="activeMenu">
          <el-menu-item index="/home/stuInfo" v-if="role == 'admin'">管理学生信息</el-menu-item>
          <el-menu-item index="/home/teaInfo" v-if="role == 'admin'">管理教师信息</el-menu-item>
          <el-menu-item index="/home/stuScore" v-if="role == 'admin'">管理学生成绩</el-menu-item>
          <el-menu-item index="/home/lookScore" v-else>成绩查询</el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <div class="homeBox" v-if="this.$router.currentRoute.path == '/home'">
          <div class="headImg">
            <img src="../assets/user4.png" alt="">
          </div>
          <div class="signInfo">
            <div style="font-size:20px;margin-top:10px;"><b>个人信息</b></div>

            <el-descriptions :column="1" size="medium">
              <el-descriptions-item label="个人ID">{{ this.userInfo.id }}</el-descriptions-item>
              <el-descriptions-item label="姓名">{{ this.userInfo.name }}</el-descriptions-item>
              <el-descriptions-item label="居住地">重庆市</el-descriptions-item>
              <el-descriptions-item label="所属专业">{{ this.userInfo.prof }}</el-descriptions-item>
              <el-descriptions-item label="职位" v-if="role == 'admin'">教师</el-descriptions-item>
              <el-descriptions-item label="职位" v-else>学生</el-descriptions-item>
              <el-descriptions-item label="备注">
                <el-tag size="small" v-if="role == 'admin'">教职工</el-tag>
                <el-tag size="small" v-else>学员</el-tag>
              </el-descriptions-item>
            </el-descriptions>
            <el-button type="success" size="large">修改信息</el-button>
          </div>
        </div>
        <router-view />
      </el-main>
    </el-container>

    <el-footer class="homeFooter">
      <p style="margin:0;">&copy; 2023 All Rights Reserved | Design by CO.cool</p>
    </el-footer>
  </div>
</template>

<script>
export default {
  inject: ['reload'],
  data() {
    return {
      role: sessionStorage.getItem('role'),
      activeMenu: '',
      userID: sessionStorage.getItem('userId'),
      userInfo: JSON.parse(sessionStorage.getItem('userInfo'))
    }
  },
  methods: {
    menuClick(index) {
      this.$router.push(index);
    },
    quitLogin() {
      sessionStorage.clear();
      this.$router.replace('/');
    },
    signInfo() {
      this.reload();
      this.$router.push('/home');
    }
  },
  mounted() {
    if (this.$router.currentRoute.path == '/home/stuInfo') {
      this.activeMenu = '/home/stuInfo';
    } else if (this.$router.currentRoute.path == '/home/stuScore') {
      this.activeMenu = '/home/stuScore';
    } else {
      this.activeMenu = '';
    }
  }

}
</script>

<style scoped>
.homeHeader {
  background-color: #000000;
  /* height: 80px !important; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
}

.homeHeader h1 {
  margin: 0;
  color: rgb(255, 255, 255);
}

.headImg {
  margin: 0 auto;
}

.headImg img {
  width: 160px;
  height: 160px;
  border-radius: 30px;
}
/* 
.signInfo {
  width: 400px;
  margin: 0 auto;
} */
.el-descriptions{
  width: 400px;
  margin: 10px 430px;
}

.el-dropdown-link img {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  margin-left: 8px;
}

.el-aside {
  margin-top: 20px;
}

.el-footer {
  background-color: #000000;
  width: 100%;
  color: #fff;
  height: 50px !important;
  text-align: center;
  line-height: 50px;
}

#main-container {
  width: 1300px;
  margin: auto;
  min-height: 650px;
  border: 1px solid rgb(238, 238, 238);
  box-shadow: 0px 5px 5px #cec9c9;
}
</style>